<template>
     <!-- 顶部导航生成路径 -->
     <div class="View">
          <div class="view-container-Navigation ">
               <div v-for="(item, index) in Navigation_src" class="view-navigation">
                    <router-link :to="item.menu_to">
                         <div>
                              <span style="color: rgb(168, 230, 255);font-size:10px;">{{ item.menu_name }}</span>
                         </div>
                    </router-link>
                    <span style="cursor:default" @click="Navigation_split(index)">x</span>
               </div>
               <div v-for="(item, index) in Navigation_send_src" class="view-navigation">
                    <router-link :to="item.menu_second_to">
                         <span style="color: rgb(168, 230, 255);font-size:10px;">{{ item.menu_second_name }}</span>
                    </router-link>
                    <span style="cursor:default" @click="Navigation_send_split(index)">x</span>
               </div>
          </div>
     </div>
     <div class="container" style="background-color: #3A3D48;position:relative;left:-4px">
          <el-row class="tac">
               <!-- 一级菜单 -->
               <el-menu v-for="(item, index) in MenuList" active-text-color="white" default-active="2" unique-opened
                    class="el-menu-vertical-demo" background-color="#1F2027">
                    <div v-if="item.children.length == 0" class="Menu_first" @click="Navigation(item)">
                         <router-link :to="item.menu_to">
                              <el-menu-item index="2">
                                   <span style="color: white;">{{ item.menu_name }}</span>
                              </el-menu-item>
                         </router-link>
                    </div>
                    <el-sub-menu active-text-color="rgb(168, 230, 255)" :index="item.menu_guid" v-else>
                         <template #title>
                              <span style="color: white;">{{ item.menu_name }}</span>
                         </template>
                         <el-menu-item-group @click="Navigation_Second(menuitem)" v-for="menuitem in item.children">
                              <router-link :to="menuitem.menu_second_to">
                                   <el-menu-item :index="1 - menuitem.menu_second_guid" style="color: white;">{{
                                        menuitem.menu_second_name
                                   }}</el-menu-item>
                              </router-link>
                         </el-menu-item-group>
                    </el-sub-menu>
               </el-menu>
          </el-row>
     </div>
</template>
<script setup lang="ts">
import { useRouter } from 'vue-router'
import { TokenVerifyTime, TokenValue } from '../service/Token.js'
import { ref, reactive, onMounted } from 'vue';
import { ReadImageSrc } from '../config.js'
import { RouterView } from 'vue-router';
import { getMenuList_first, getMenuList_second, getMenuList_second_son, getTreeMenu } from '../service/Menu.js'
import Cookie from "js-cookie";
import '../assets/media/Menu.css'
import { getUser } from '../service/Login.js'

const router = useRouter()
// 接受参数
const MenuList = ref([])
onMounted(() => {
     //*获取Token值
     const Token = Cookie.get("UUID")
     if (Token != null) {
          const data = { User: localStorage.getItem('User') }
          if (location.pathname != "/login") {
               // Token判断
               TokenVerifyTime(data).then((res: any) => {
                    if (res.code == 200) {
                         getTreeMenu().then((res: any) => {
                              MenuList.value = res.data
                         })
                    }

               })
          }

     }
})
// 二级下拉菜单获取子级
const handleOpen = (key, keyPath) => {
     const data = { menu_guid: key }
     getMenuList_second_son(data).then((res) => {
          Menu_second_son_List.value = res.data

     })
}
//*一级
const Navigation_src = ref([])
//*二级
const Navigation_send_src = ref([])
//*顶部导航生成
const Navigation = (index) => {
     //*防止重复追加
     if (Navigation_src.value.indexOf(index) == -1) {
          Navigation_src.value.push(index)
     }


}
const Navigation_Second = (index) => {
     //*防止重复追加
     if (Navigation_send_src.value.indexOf(index) == -1) {
          Navigation_send_src.value.push(index)
     }

}
//*清除顶部导航
const Navigation_split = (index) => {
     Navigation_src.value.splice(index, 1)
     if (!Navigation_src.value[index] && Navigation_src.value.length != 0 && Navigation_send_src.value.length != 0) {
          //*如果有二级子菜单，那么从中间删除最后一个一级菜单的时候，跳到二级菜单的第一个路由
          router.push(Navigation_send_src.value[0].menu_second_to)
     }
     else if (!Navigation_src.value[index] && Navigation_src.value.length != 0) {
          //*从最后面开始删除，那么会跳到前一个路由
          router.push(Navigation_src.value[index - 1].menu_to)
     }
     else if (!Navigation_src.value[index]) {
          //*如果没有了，则跳转到二级菜单的路由
          router.push(Navigation_send_src.value[Navigation_send_src.value.length - 1].menu_second_to)
     }
     else {
          //*如果从中间删除，则跳转后面一位的路由
          router.push(Navigation_src.value[index].menu_to)
     }

}
const Navigation_send_split = (index) => {
     Navigation_send_src.value.splice(index, 1)


     if (!Navigation_send_src.value[index] && Navigation_send_src.value.length != 0) {
          //*从最后面开始删除，那么会跳到前一个路由
          router.push(Navigation_send_src.value[index - 1].menu_second_to)
     }
     else if (!Navigation_send_src.value[index]) {
          //*如果没有了，则跳转到一级菜单的路由
          router.push(Navigation_src.value[Navigation_src.value.length - 1].menu_to)
     }
     else {
          //*如果从中间删除，则跳转后面一位的路由
          router.push(Navigation_send_src.value[index].menu_second_to)
     }
     //*固死位置的跳转->不采取
     // if (Navigation_send_src.value.length == 0) {
     //      router.push(Navigation_src.value[Navigation_src.value.length-1].menu_to)
     // } else {
     //      router.push(Navigation_send_src.value[Navigation_send_src.value.length - 1].menu_second_to)
     // }

}

</script>
<style>
svg{
     color: deepskyblue;
}
.UserShow {
     height: 150px;
     margin-top: 10px;
     display: flex;
     justify-content: center;
     align-items: center;
     flex-direction: column;
}

.view-navigation {
     border: 1px solid rgb(168, 230, 255);
     float: left;
     width: 100px;
     display: flex;
     justify-content: space-around;
     align-items: center;
     background-color: #fff;
     color: rgb(168, 230, 255);
     border-radius: 6px 6px 0px 0px;
}



.el-menu-item {
     color: rgb(255, 255, 255);
}

.el-row {
     display: block !important;
}

.container {
     z-index: 100000;
}

.container {
     border: 0px solid blue;
     width: 180px;
     height: 92vh;
     overflow-y: scroll;
     scroll-behavior: smooth;
     scroll-snap-align: initial;
}

.view-container-Navigation {
     border: 0px solid blue;
     margin-top: 5.8vh;
}

.View {
     z-index: 0;
     top: 0;
     position: absolute;
     border: 0px solid blue;
     width: 0vw;
     height: 0px;


}

ul {
     padding: 0;
     margin: 0;
     border: none;
}

li {
     padding: 0;
     margin: 0;
     border: none;
}
</style>